$(function () {
    $("#div_head").empty();
    $("#mainContainer").empty();

    $.getJSON("custom/url.json", function (data) {
        /** 顶部链接
         * "url":跳转的链接
         * "text":文字名称
         * "child":弹出子节,设置此项时url无效,子元素个数为0时该节点不会显示 */
        let strhtml = DyHtml("top", data["top"]);
        $("#div_head").html(strhtml);
        /**主要链接
         * 不需要切换的直接写 url 属性
         * 内网链接写 url.local 属性
         * 外网链接写 url.internal 属性
         * 至少设置了一个属性,页面才会显示元素 */
        strhtml = DyHtml("main", data["main"]);

        $("#mainContainer").html(strhtml);

        let config = data["config"]
        if (config.particlesJS) {
            particles()
        }
        /** 控制 div_head 元素子节点显示 */
        $('#div_head>ul>li').hover(function () {
            $(this).children('a').toggleClass('sel');
            $(this).children('.hm').toggle();
        })
    });

    $("#qieh").click(function () {
        if ($("#qieh").is(":checked")) {//显示外网链接
            $(".local").css("display", "none");
            $(".internal").css("display", "block");
        } else {//显示内网链接
            $(".local").css("display", "block");
            $(".internal").css("display", "none");
        }
    });
    function DyHtml(type, html) {
        let strhtml = "", strhtml2 = "";
        $.each(html, function (index, info) {
            if (type === "top") {
                if (info["child"]) {
                    strhtml2 = "";
                    $.each(info["child"], function (index3, info2) {
                        strhtml2 += createdTopMenuLi(type, info2);
                    });
                    if (strhtml2) {
                        strhtml += '<li>'
                            + '<a href="javascript:">' + createdIco(type, info) + '<strong>' + info.text + '</strong></a>'
                            + '<ul class="hm">' + strhtml2 + '</ul>'
                            + '</li>';
                    }
                } else {
                    strhtml += createdTopMenuLi(type, info);
                }
            }
            else if (type === "main") {
                if (info["child"]) {
                    strhtml2 = "";
                    $.each(info["child"], function (index2, info2) {
                        strhtml2 += DyLiHtml(type, info2);
                    })
                    if (strhtml2) {
                        let popDivID = 'pop' + type + index;
                        $("body").append('<div id="' + popDivID + '" class="app animated fadeInRight container" onclick="closePop(\'' + popDivID + '\')">'
                            + '<div class= "popDiv" onclick="event.cancelBubble = true;">'
                            + '<svg class="close" onclick="closePop(\'' + popDivID + '\')"><use xlink:href="custom/img/svg/ico.svg#cross"></use></svg>'
                            + '<h2 class="group_title">' + info.text + '</h2>'
                            + '<ul class="clearfix">' + strhtml2 + '</ul></div></div>');
                        let popType = "";
                        if (strhtml2.indexOf('local') > -1 && strhtml2.indexOf('internal') > -1) { popType = type; }
                        else {
                            if (strhtml2.indexOf('local') > -1) { popType = 'local'; }
                            if (strhtml2.indexOf('internal') > -1) { popType = 'internal'; }
                        }
                        strhtml += '<li class="' + popType + '"><a href="javascript:" onclick="pop(\'' + popDivID + '\')">' + createdIco(type, info) + '<strong>' + info.text + '</strong></a></li>';
                    }
                } else {
                    strhtml += DyLiHtml(type, info);
                }
            }
        });
        return '<ul class="clearfix">' + strhtml + '</ul>';
    };
    function createdTopMenuLi(type, info) {
        /** 生成顶部菜单 <li></li> 元素 */
        return '<li><a href="' + info.url + '" target="_blank">' + createdIco(type, info) + '<strong>' + info.text + '</strong></a></li>';
    };
    function DyLiHtml(type, info) {
        /** 生成主菜单 <li></li> 元素 */
        let strhtml = "";
        if (info.url) {
            let icoHtml = createdIco(type, info);
            if (info.url.internal) {//外网链接
                strhtml += createdMainMenuLi('internal', info.url.internal, icoHtml, info.text);
            }
            if (info.url.local) {//内网链接
                strhtml += createdMainMenuLi('local', info.url.local, icoHtml, info.text);
            }
            if (!(info.url.internal || info.url.local)) {//不区分内外网链接
                strhtml += createdMainMenuLi(type, info.url, icoHtml, info.text);
            }
        }
        return strhtml;
    };
    function createdMainMenuLi(className, url, ico, text) {
        return '<li class="' + className + '"><a href="' + url + '" target="_blank">' + ico + '<strong>' + text + '</strong></a></li>';
    }
    function createdIco(type, info) {
        /** 生成菜单的图标元素 */
        let className = '';
        switch (type) {
            case 'top': className = 'top_ico'; break;
            case 'main': className = 'shake'; break;
            default: break;
        }
        if (info.href) {
            return '<svg class="' + className + '"><use xlink:href="' + info.href + '"></use></svg>';
        }
        if (info.ico) {
            return '<img class="' + className + '" src="' + info.ico + '"/>';
        }
        return '';
    };
    pop = function (id) {
        $("#" + id).css("display", "block");
    };
    closePop = function (id) {
        $("#" + id).css("display", "none");
    };
    //调用此方法会显示随机线条,虚拟机会大量占用cpu
    particles = function () {
        particlesJS("particles-js", {
            particles: {
                number: {
                    value: 20,
                    density: {
                        enable: !0,
                        value_area: 1000
                    }
                },
                color: {
                    value: "#e1e1e1"
                },
                shape: {
                    type: "circle",
                    stroke: {
                        width: 0,
                        color: "#000000"
                    },
                    polygon: {
                        nb_sides: 5
                    },
                    image: {
                        src: "img/github.svg",
                        width: 100,
                        height: 100
                    }
                },
                opacity: {
                    value: 0.5,
                    random: !1,
                    anim: {
                        enable: !1,
                        speed: 1,
                        opacity_min: 0.1,
                        sync: !1
                    }
                },
                size: {
                    value: 15,
                    random: !0,
                    anim: {
                        enable: !1,
                        speed: 180,
                        size_min: 0.1,
                        sync: !1
                    }
                },
                line_linked: {
                    enable: !0,
                    distance: 650,
                    color: "#cfcfcf",
                    opacity: 0.26,
                    width: 1
                },
                move: {
                    enable: !0,
                    speed: 2,
                    direction: "none",
                    random: !0,
                    straight: !1,
                    out_mode: "out",
                    bounce: !1,
                    attract: {
                        enable: !1,
                        rotateX: 600,
                        rotateY: 1200
                    }
                }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: {
                        enable: !1,
                        mode: "repulse"
                    },
                    onclick: {
                        enable: !1,
                        mode: "push"
                    },
                    resize: !0
                },
                modes: {
                    grab: {
                        distance: 400,
                        line_linked: {
                            opacity: 1
                        }
                    },
                    bubble: {
                        distance: 400,
                        size: 40,
                        duration: 2,
                        opacity: 8,
                        speed: 3
                    },
                    repulse: {
                        distance: 200,
                        duration: 0.4
                    },
                    push: {
                        particles_nb: 4
                    },
                    remove: {
                        particles_nb: 2
                    }
                }
            },
            retina_detect: !0
        });
    };
})

document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        let loadingMask = document.getElementById('loadingDiv');
        loadingMask.parentNode.removeChild(loadingMask)

        $(".textInput").focus()
    }
}


//alert("屏幕宽*高=" + screen.width + "*" + screen.height + "\r\n内容宽*高=" + document.documentElement.clientWidth + "*" + document.documentElement.clientHeight);
